<template>
	<view class="filtrate">
		<view class="box kong" v-if="arr.length==0">
			<image src="../../static/kong1.png" mode=""></image>
		</view>
		
		<view class="box"  v-else>
			<view class="item-content">
			<view class="filtrate-item" v-for="(i,ind) in first.catArray" :key="ind" :class="i.value==firstindex?'active':''" @click="firstFun(i.value)">
					{{i.name}}
			</view>
			</view>
			<view class="item-content">
			<view class="filtrate-item" v-for="(i,ind) in second.catArray" :key="ind" :class="i.value==secondindex?'active':''" @click="secondFun(i.value)" >
					{{i.name}}
			</view>
			</view>
			<view class="item-content">
			<view class="filtrate-item" v-if="thirdly.type!='sort'" v-for="(i,ind) in thirdly.catArray" :key="ind" :class="i.value==thirdlyindex?'active':''" @click="thirdlyFun(i.value)" >
					{{i.name}}
			</view>
			</view>
			<view class="fiction">
				<view class="fiction-item" v-for="(item,index) in list" :key="index" @click="switchDetail(item.id,item.title)" v-if="list.length!=0">
					<view class="fiction-img">
						<image :src="item.cover" @error="error(index)" mode=""></image>
						<!-- <img :src="item.cover" alt=""  @error="error(index)" /> -->
					</view>
					<view class="fiction-name">
						{{item.title}}
					</view>
					<view class="fiction-author">
						{{item.author}}
					</view>
				</view>
				<view class="fiction-item" v-if="list.length%3!=0">
					<view class="fiction-img"></view>
					<view class="fiction-name"></view>
					<view class="fiction-author"></view>
				</view>
				<view class="box kong" v-if="list.length==0">
					<image src="../../static/kong1.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {getSecondClassifyResult,getResult} from "../../api/index.js"
	export default {
		data() {
			return {
				myurl:"",
				list:[],
				arr:[],
				first:[],
				second:[],
				thirdly:[],
				firstindex:0,
				secondindex:0,
				thirdlyindex:0,
				pag:0,
				catId:0,
			}
		},
		onLoad(options) {
			 this.myurl=options.myurl
			 this.catId=this.myurl.substr(this.myurl.indexOf("=")+1)
			 getSecondClassifyResult(options.myurl).then(res=>{
				 let {resDesc,categories} =res
				 if(resDesc=="成功"){
					 if(categories.length>3){
						this.arr=categories.slice(0,3)
						console.log("this.arr:===",this.arr);
						this.first=this.arr[0]
						this.second=this.arr[1]
						this.thirdly=this.arr[2]
						uni.showLoading({
						     title: '正在加载...',
						    });	
						getResult(this.urls).then(res=>{
							if(res.list!=undefined){
								console.log(res.list);
								this.list=res.list
								console.log("this.arr:---------",this.list);
								uni.hideLoading();
							}
							uni.hideLoading();
						})
					 }else{
						this.arr= categories
						this.first=this.arr[0]
						this.second=this.arr[1]
						this.thirdly=this.arr[2]
						uni.showLoading({
						     title: '正在加载...',
						    });	
						getResult(this.urls).then(res=>{
							if(res.list!=undefined){
								console.log(res.list);
								this.list=res.list
								uni.hideLoading();
							}
							uni.hideLoading();
						})
					 }
					 }
				 }
			 )
		},
		methods: {
			switchDetail(id,title){
				uni.navigateTo({
					url:`../detail/detail?id=${id}&title=${title}`
				})
			},
			error(index) {
				console.log(this.arr);
				console.log(index)
				let arr=this.list[index]
				arr.cover="../../static/kongimg.jpg"
				console.log(arr);
				this.$set(this.list, index,arr );
			},
			firstFun(val){
				this.firstindex=val
			},
			secondFun(val){
				this.secondindex=val
			},
			thirdlyFun(val){
				this.thirdlyindex=val
			},
		},
		computed:{
			urls(){
				return `/source/v2/searchBook.json?catId=${this.catId}&wordCount=${this.thirdlyindex}&pay=${this.firstindex}&bookStatus=${this.secondindex}&sort=1`
			}
		},
		watch:{
			urls:{
				handler (val, oldVal) {
					console.log(val);
					if(val!=oldVal){
						uni.showLoading({
						     title: '正在加载...',
						    });	
						getResult(val).then(res=>{
							if(res.list!=undefined){
								// console.log(this.arr);
								// console.log(res.list,11111111111);
								this.list=res.list
								uni.hideLoading();
							}
							uni.hideLoading();
						})
					}
					
				},
			}
		}
	}
</script>

<style lang="scss">
.box.kong{
	display: flex;
	justify-content: center;
	align-items: center;
	image{}
}
.item-content{
	margin-top: 10px;
	box-sizing: border-box;
	padding:0 10px ;
	display: flex;
	flex-wrap: wrap;
	.filtrate-item{
		margin: 0 10px 10px 0;
		font-size: 15px;
		&.active{
			color: #f9834a;
		}
	}	
}
.fiction{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		box-sizing: border-box;
		padding:0 10px ;
		.fiction-item{
			width: 30%;
			margin: 10px 0;
		}
		.fiction-img{
			width: 100%;
			height: 280rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.fiction-name{
			margin: 3px 0;
			display: -webkit-box;
			overflow: hidden;
			-webkit-box-orient: vertical;
			line-clamp: 2;
			-webkit-line-clamp: 2;
		}
		.fiction-author{
			color: #8f8f8f;
			display: -webkit-box;
			overflow: hidden;
			-webkit-box-orient: vertical;
			line-clamp: 2;
			-webkit-line-clamp: 2;
		}
	}
</style>
